﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Profile | Perfect Admin - Responsive HTML5 Admin Template</title>
	<meta name="keywords" content="HTML5 Admin Template" />
	<meta name="description" content="Perfect Admin - Responsive HTML5 Admin Template">
	<meta name="author" content="perfectusinc.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- Google Web Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="http://cdn.bootstrapmb.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <!-- Page CSS -->
	<link rel="stylesheet" href="../../assets/css/custompages/user-profile.css">
	<link rel="stylesheet" href="../../assets/css/elements/timeline.css">
    <!-- Custom CSS Starts -->
    <link rel="stylesheet" href="../../assets/css/skin/all-skins.css">
    <link rel="stylesheet" href="../../assets/css/general/style.css">
    <link rel="stylesheet" href="../../assets/css/sidebar/side-nav.css">
	<link rel="stylesheet" href="../../assets/css/fonts/fonts-style.css">
	<link rel="stylesheet" href="../../assets/css/nanoscroller/nanoscroller.css">
</head>

<body class="sidebar-mini fixed skin-blue">
    <div class="wrapper">
		<!-- Header Section Starts -->
		<header class="main-header">
			<!-- Logo -->
			<a href="https://admin.perfectuswebinsights.com/pages/index2.html" class="logo">
				<!-- mini logo for sidebar mini 50x50 pixels -->
				<span class="logo-mini"><b>P</b>AD</span>
				<!-- logo for regular state and mobile devices -->
				<span class="logo-lg"><b>Perfect </b>Admin</span>
			</a>
			<nav class="navbar navbar-static-top">
				<!-- Sidebar toggle button-->
				<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
					<span class="sr-only">Toggle navigation</span>
				</a>

				<div class="navbar-custom-menu">
					<ul class="nav navbar-nav">
						<!-- Messages Section Starts-->
						<li class="dropdown messages-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-envelope-o"></i>
								<span class="label label-success">4</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 4 messages</li>
								<li>
									<!-- Inner Menu Starts -->
									<ul class="menu">
										<!-- Message Area Starts -->
										<li>
											<a href="#">
												<h4>
													Support Team
													<small><i class="fa fa-clock-o"></i> 5 mins</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Perfectus Design Team
													<small><i class="fa fa-clock-o"></i> 2 hours</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Developers
													<small><i class="fa fa-clock-o"></i> Today</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Sales Department
													<small><i class="fa fa-clock-o"></i> Yesterday</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Reviewers
													<small><i class="fa fa-clock-o"></i> 2 days</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<!-- Message Area Ends -->
									</ul>
								</li>
								<li class="footer"><a href="#">See All Messages</a></li>
							</ul>
						</li>
						<!-- Messages Section Ends -->
						<!-- Notifications Section Starts -->
						<li class="dropdown notifications-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-bell-o"></i>
								<span class="label label-warning">10</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 10 notifications</li>
								<li>
									<!-- Inner Menu Starts -->
									<ul class="menu">
										<li>
											<a href="#">
												<i class="fa fa-users text-aqua"></i> 5 new members joined today
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-users text-red"></i> 5 new members joined
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-shopping-cart text-green"></i> 25 sales made
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-user text-red"></i> You changed your username
											</a>
										</li>
									</ul>
								</li>
								<li class="footer"><a href="#">View all</a></li>
							</ul>
						</li>
						<!-- Notifications Section Ends -->
						<!-- Tasks Section Starts -->
						<li class="dropdown tasks-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-flag-o"></i>
								<span class="label label-danger">9</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 9 tasks</li>
								<li>
									<!-- Inner Menu Starts -->
									<ul class="menu">
										<!-- Task Item Starts -->
										<li>
											<a href="#">
												<h3>
													Design some buttons
													<small class="pull-right">20%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">20% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>
													Create a nice theme
													<small class="pull-right">40%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">40% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>
													Some task I need to do
													<small class="pull-right">60%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">60% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>
													Make beautiful transitions
													<small class="pull-right">80%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">80% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<!-- Task Item Ends -->
									</ul>
								</li>
								<li class="footer">
									<a href="#">View all tasks</a>
								</li>
							</ul>
						</li>
						<!-- Tasks Section Ends -->
						<!-- User Account Section Starts -->
						<li class="dropdown user user-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<img src="../../assets/images/user2-160x160.jpg" class="user-image" alt="User Image">
								<span class="d-none d-sm-block">Alexander Pierce</span>
							</a>
							<ul class="dropdown-menu">
								<!-- User Image Starts -->
								<li class="user-header">
									<img src="../../assets/images/user2-160x160.jpg" class="img-circle" alt="User Image">
									<p>
										Alexander Pierce - Web Developer
										<small>Member since Nov. 2012</small>
									</p>
								</li>
								<!-- User Image Ends -->
								<!-- Menu Body Starts -->
								<li class="user-body">
									<div class="row">
										<div class="col-4 text-center">
											<a href="#">Followers</a>
										</div>
										<div class="col-4 text-center">
											<a href="#">Sales</a>
										</div>
										<div class="col-4 text-center">
											<a href="#">Friends</a>
										</div>
									</div>
								</li>
								<!-- Menu Body Ends -->
								<!-- Menu Footer Starts -->
								<li class="user-footer">
									<div class="pull-left">
										<a href="#" class="btn btn-default btn-flat">Profile</a>
									</div>
									<div class="pull-right">
										<a href="#" class="btn btn-default btn-flat">Sign out</a>
									</div>
								</li>
								<!-- Menu Footer Ends -->
							</ul>
						</li>
						<!-- User Account Section Ends -->
					</ul>
				</div>
			</nav>
		</header>
		<!-- Header Section Ends -->
        
		<!-- Sidebar Section Starts -->
		<aside class="main-sidebar">
			<div class="nano">
				<div class="nano-content">
					<ul class="sidebar-menu" data-widget="tree">
						<li class="header">MAIN NAVIGATION</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-dashboard"></i> <span>Dashboard</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
								<li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-files-o"></i>
								<span>Layout Options</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								
								<li><a href="../../pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
								
								<li><a href="../../pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-pie-chart"></i>
								<span>Charts</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li class="treeview">
									<a href="#"><i class="fa fa-circle-o"></i>
										<span>ChartJS</span>
										<span class="pull-right-container">
											<i class="fa fa-angle-left pull-right"></i>
										</span>
									</a>
									<ul class="treeview-menu">
										<li><a href="../../pages/charts/pie-chart.html"><i class="fa fa-circle-o"></i> Pie Chart</a></li>
										<li><a href="../../pages/charts/line-chart.html"><i class="fa fa-circle-o"></i> Line Chart</a></li>
										<li><a href="../../pages/charts/bar-chart.html"><i class="fa fa-circle-o"></i> Bar Chart</a></li>
									</ul>
								</li>
								<li><a href="../../pages/charts/sparkline.html"><i class="fa fa-circle-o"></i> Sparkline</a></li>
								<li><a href="../../pages/charts/flot-chart.html"><i class="fa fa-circle-o"></i> Flot Charts</a></li>
								
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-laptop"></i>
								<span>UI Elements</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								
								<li><a href="../../pages/elements/font-awesome-icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
								<li><a href="../../pages/elements/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
								<li><a href="../../pages/elements/hr-timeline.html"><i class="fa fa-circle-o"></i> Horizontal Timeline</a></li>
								<li><a href="../../pages/elements/timeline.html"><i class="fa fa-circle-o"></i> Vertical Timeline</a></li>
								<li><a href="../../pages/elements/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
								<li><a href="../../pages/elements/sweet-alert.html"><i class="fa fa-circle-o"></i> Sweet Alerts</a></li>
								<li><a href="../../pages/elements/accordion.html"><i class="fa fa-circle-o"></i> Accordions</a></li>
								<li><a href="../../pages/elements/progressbars.html"><i class="fa fa-circle-o"></i> Progress Bars</a></li>
								<li><a href="../../pages/elements/toastr.html"><i class="fa fa-circle-o"></i> Toastr</a></li>
								<li><a href="../../pages/elements/alerts.html"><i class="fa fa-circle-o"></i> Alert Box</a></li>
								<li><a href="../../pages/elements/tooltip.html"><i class="fa fa-circle-o"></i> Tool Tip</a></li>
								<li><a href="../../pages/elements/knob.html"><i class="fa fa-circle-o"></i> Knob</a></li>
								<li><a href="../../pages/elements/slider.html"><i class="fa fa-circle-o"></i> Carousel</a></li>
								<li><a href="../../pages/elements/pricing-table.html"><i class="fa fa-circle-o"></i> Pricing Tables</a></li>
								<li><a href="../../pages/elements/range-slider.html"><i class="fa fa-circle-o"></i> Range Slider</a></li>
								<li><a href="../../pages/elements/dropdowns.html"><i class="fa fa-circle-o"></i> Dropdowns</a></li>
								<li><a href="../../pages/elements/grid-list.html"><i class="fa fa-circle-o"></i> Grid/List</a></li>
								<li><a href="../../pages/elements/list-group.html"><i class="fa fa-circle-o"></i> List Group</a></li>
								<li><a href="../../pages/elements/cards.html"><i class="fa fa-circle-o"></i> Cards</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-edit"></i> <span>Forms</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
								<li><a href="../../pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
								<li><a href="../../pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
								<li><a href="../../pages/forms/form-wizard.html"><i class="fa fa-circle-o"></i> Form Wizard</a></li><li><a href="../../pages/forms/file-upload.html"><i class="fa fa-circle-o"></i> File Upload</a></li>
								<li><a href="../../pages/forms/form-mask.html"><i class="fa fa-circle-o"></i> Formatter</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-table"></i> <span>Tables</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/tables/basic.html"><i class="fa fa-circle-o"></i> Basic tables</a></li>
								<li><a href="../../pages/tables/advanced.html"><i class="fa fa-circle-o"></i> Advanced tables</a></li>
								<li><a href="../../pages/tables/nestable.html"><i class="fa fa-circle-o"></i> NesTable</a></li>
								<li><a href="../../pages/tables/jsgrid.html"><i class="fa fa-circle-o"></i> JS Grid</a></li>
							</ul>
						</li>
						<li>
							<a href="../../pages/calendar.html">
								<i class="fa fa-calendar"></i> <span>Calendar</span>
							</a>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-envelope"></i> <span>Mailbox</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/mailbox/inbox.html"><i class="fa fa-circle-o"></i> Inbox</a></li>
								<li><a href="../../pages/mailbox/compose.html"><i class="fa fa-circle-o"></i> Compose</a></li>
								<li><a href="../../pages/mailbox/read-mail.html"><i class="fa fa-circle-o"></i> Read</a></li>
							</ul>
						</li>
						<li class="treeview active">
							<a href="#">
								<i class="fa fa-folder"></i> <span>Custom Pages</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/custompages/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
								<li class="active"><a href="../../pages/custompages/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
								<li class="treeview">
									<a href="#"><i class="fa fa-circle-o"></i> Login
										<span class="pull-right-container">
											<i class="fa fa-angle-left pull-right"></i>
										</span>
									</a>
									<ul class="treeview-menu">
										<li><a href="../../pages/custompages/login1.html"><i class="fa fa-circle-o"></i> Login Page 1</a></li>
										<li><a href="../../pages/custompages/login2.html"><i class="fa fa-circle-o"></i> Login Page 2</a></li>
										<li><a href="../../pages/custompages/login3.html"><i class="fa fa-circle-o"></i> Login Page 3</a></li>
									</ul>
								</li>
								<li><a href="../../pages/custompages/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
								<li><a href="../../pages/custompages/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
								<li><a href="../../pages/custompages/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
								<li><a href="../../pages/custompages/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
								<li><a href="../../pages/custompages/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-share"></i> <span>Multilevel</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
								<li class="treeview">
									<a href="#"><i class="fa fa-circle-o"></i> Level One
										<span class="pull-right-container">
											<i class="fa fa-angle-left pull-right"></i>
										</span>
									</a>
									<ul class="treeview-menu">
										<li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
										<li class="treeview">
											<a href="#"><i class="fa fa-circle-o"></i> Level Two
												<span class="pull-right-container">
													<i class="fa fa-angle-left pull-right"></i>
												</span>
											</a>
											<ul class="treeview-menu">
												<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
												<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
							</ul>
						</li>
						
						<li class="header">LABELS</li>
						<li><a href="#"><i class="fa fa-circle-o text-danger"></i> <span>Important</span></a></li>
						<li><a href="#"><i class="fa fa-circle-o text-warning"></i> <span>Warning</span></a></li>
						<li><a href="#"><i class="fa fa-circle-o text-info"></i> <span>Information</span></a></li>
					</ul>
				</div>
			</div>
		</aside>
		<!-- Sidebar Section Ends -->
        
		<!-- Page Content Starts-->
		<div class="content-wrapper">
			<section class="content-header">
				<h1>
					Profile
					<small>Examples</small>
				</h1>
				<ol class="breadcrumb">
					<li><a href="../../index.html"><i class="fa fa-dashboard"></i> Home</a></li>
					<li><a href="#">Examples</a></li>
					<li class="active">Profile</li>
				</ol>
			</section>
			<section class="content">
				<div class="row">
					<div class="col-md-3">
						<!-- Profile Image -->
						<div class="cardbg">
							<div class="box-body box-profile">
								<img class="profile-user-img img-fluid img-circle" src="../../assets/images/user6-128x128.jpg" alt="User profile picture">
								<h3 class="profile-username text-center">Nina Mcintire</h3>
								<p class="text-muted text-center">Software Engineer</p>
								<ul class="list-group list-group-unbordered">
									<li class="list-group-item">
										<b>Followers</b> <a class="float-right">1,322</a>
									</li>
									<li class="list-group-item">
										<b>Following</b> <a class="float-right">543</a>
									</li>
									<li class="list-group-item">
										<b>Friends</b> <a class="float-right">13,287</a>
									</li>
								</ul>
								<a href="#" class="btn btn-primary btn-block"><b>Follow</b></a>
							</div>
							<!-- /.box-body -->
						</div>
						<!-- /.box -->
						<!-- About Me Box -->
						<div class="cardbg">
							<div class="box-header with-border">
								<h3 class="box-title">About Me</h3>
							</div>
							<!-- /.box-header -->
							<div class="box-body">
								<strong><i class="fa fa-book margin-r-5"></i> Education</strong>
								<p class="text-muted">
									B.S. in Computer Science from the University of Tennessee at Knoxville
								</p>
								<hr>
								<strong><i class="fa fa-map-marker margin-r-5"></i> Location</strong>
								<p class="text-muted">Malibu, California</p>
								<hr>
								<strong><i class="fa fa-pencil margin-r-5"></i> Skills</strong>
								<p class="text-muted">
									<span class="tag bg-danger">UI Design</span>
									<span class="tag bg-success">Coding</span>
									<span class="tag bg-info">Javascript</span>
									<span class="tag bg-warning">PHP</span>
									<span class="tag bg-primary">Node.js</span>
								</p>
								<hr>
								<strong><i class="fa fa-file-text-o margin-r-5"></i> Notes</strong>
								<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum enim neque.</p>
							</div>
							<!-- /.box-body -->
						</div>
						<!-- /.box -->
					</div>
					<!-- /.col -->
					<div class="col-md-9">
						<div class="nav-tabs-custom cardbg">
							<ul class="nav nav-tabs">
								<li><a class="active" href="#activity" data-toggle="tab">Activity</a></li>
								<li><a href="#timeline" data-toggle="tab">Timeline</a></li>
								<li><a href="#settings" data-toggle="tab">Settings</a></li>
							</ul>
							<div class="tab-content">
								<div class="active tab-pane" id="activity">
									<!-- Post -->
									<div class="post">
										<div class="user-block">
											<img class="img-circle img-bordered-sm" src="../../assets/images/avatar2.png" alt="user image">
											<span class="username">
												<a href="#">Jonathan Burke Jr.</a>
												<a href="#" class="float-right btn-box-tool"><i class="fa fa-times"></i></a>
											</span>
											<span class="description">Shared publicly - 7:30 PM today</span>
										</div>
										<!-- /.user-block -->
										<p>
											Lorem ipsum represents a long-held tradition for designers,
											typographers and the like. Some people hate it and argue for
											its demise, but others ignore the hate as they create awesome
											tools to help create filler text for everyone from bacon lovers
											to Charlie Sheen fans.
										</p>
										<ul class="list-inline">
											<li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>
											<li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a>
											</li>
											<li class="float-right">
											  <a href="#" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments
												(5)</a></li>
										</ul>
										<input class="form-control form-control-sm" type="text" placeholder="Type a comment">
									</div>
									<!-- /.post -->

									<!-- Post -->
									<div class="post clearfix">
										<div class="user-block">
											<img class="img-circle img-bordered-sm" src="../../assets/images/avatar3.png" alt="User Image">
											<span class="username">
												<a href="#">Sarah Ross</a>
												<a href="#" class="float-right btn-box-tool"><i class="fa fa-times"></i></a>
											</span>
											<span class="description">Sent you a message - 3 days ago</span>
										</div>
										<!-- /.user-block -->
										<p>
											Lorem ipsum represents a long-held tradition for designers,
											typographers and the like. Some people hate it and argue for
											its demise, but others ignore the hate as they create awesome
											tools to help create filler text for everyone from bacon lovers
											to Charlie Sheen fans.
										</p>
										<form class="">
											<div class="form-group margin-bottom-none row">
												<div class="col-sm-9">
													<input class="form-control form-control-sm" placeholder="Response">
												</div>
												<div class="col-sm-3">
													<button type="submit" class="btn btn-primary float-right btn-block btn-sm">Send</button>
												</div>
											</div>
										</form>
									</div>
									<!-- /.post -->

									<!-- Post -->
									<div class="post">
										<div class="user-block">
											<img class="img-circle img-bordered-sm" src="../../assets/images/avatar4.png" alt="User Image">
											<span class="username">
												<a href="#">Adam Jones</a>
												<a href="#" class="float-right btn-box-tool"><i class="fa fa-times"></i></a>
											</span>
											<span class="description">Posted 5 photos - 5 days ago</span>
										</div>
										<!-- /.user-block -->
										<div class="row margin-bottom">
											<div class="col-sm-6">
												<img class="img-fluid" src="../../assets/images/user-profile1.jpg" alt="Photo">
											</div>
											<!-- /.col -->
											<div class="col-sm-6">
												<div class="row">
													<div class="col-sm-6">
														<img class="img-fluid" src="../../assets/images/user-profile2.jpg" alt="Photo">
														<br><br>
														<img class="img-fluid" src="../../assets/images/user-profile3.jpg" alt="Photo">
													</div>
													<!-- /.col -->
													<div class="col-sm-6">
														<img class="img-fluid" src="../../assets/images/user-profile4.jpg" alt="Photo">
														<br><br>
														<img class="img-fluid" src="../../assets/images/user-profile5.jpg" alt="Photo">
													</div>
												<!-- /.col -->
												</div>
												<!-- /.row -->
											</div>
											<!-- /.col -->
										</div>
										<!-- /.row -->
										<ul class="list-inline">
											<li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>
											<li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a>
											</li>
											<li class="float-right">
											  <a href="#" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments
												(5)</a></li>
										</ul>
										<input class="form-control form-control-sm" type="text" placeholder="Type a comment">
									</div>
									<!-- /.post -->
								</div>
								<!-- /.tab-pane -->
								<div class="tab-pane" id="timeline">
									<!-- The timeline -->
									<div class="timeline-3">
										<div class="timeline__group">
											<span class="timeline__year">2008</span>
											<div class="timeline__box">
												<div class="timeline__date">
													<span class="timeline__day">2</span>
													<span class="timeline__month">Feb</span>
												</div>
												<div class="timeline__post">
													<div class="timeline__content">
														<p>Attends the Philadelphia Museum School of Industrial Art. Studies design with Alexey Brodovitch, art director at Harper's Bazaar, and works as his assistant.</p>
													</div>
												</div>
											</div>
											<div class="timeline__box">
												<div class="timeline__date">
													<span class="timeline__day">1</span>
													<span class="timeline__month">Sept</span>
												</div>
												<div class="timeline__post">
													<div class="timeline__content">
														<p>Started from University of Pennsylvania. This is an important stage of my career. Here I worked in the local magazine. The experience greatly affected me</p>
													</div>
												</div>
											</div>
										</div>
										<div class="timeline__group">
											<span class="timeline__year">2014</span>
											<div class="timeline__box">
												<div class="timeline__date">
													<span class="timeline__day">14</span>
													<span class="timeline__month">Jul</span>
												</div>
												<div class="timeline__post">
													<div class="timeline__content">
														<p>Travels to France, Italy, Spain, and Peru. After completing fashion editorial in Lima, prolongs stay to make portraits of local people in a daylight studio</p>
													</div>
												</div>
											</div>
										</div>
										<div class="timeline__group">
											<span class="timeline__year">2016</span>
											<div class="timeline__box">
												<div class="timeline__date">
													<span class="timeline__day">28</span>
													<span class="timeline__month">Aug</span>
												</div>
												<div class="timeline__post">
													<div class="timeline__content">
														<p>Upon moving to Brooklyn that summer, I began photographing weddings in Chicago</p>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- /.tab-pane -->
								<div class="tab-pane" id="settings">
									<form class="form-control-hori">
										<div class="form-group row">
											<label for="inputName" class="col-sm-2 form-control-label">Name</label>
											<div class="col-sm-10">
												<input type="email" class="form-control" id="inputName" placeholder="Name">
											</div>
										</div>
										<div class="form-group row">
											<label for="inputEmail" class="col-sm-2 form-control-label">Email</label>
											<div class="col-sm-10">
												<input type="email" class="form-control" id="inputEmail" placeholder="Email">
											</div>
										</div>
										<div class="form-group row">
											<label for="inputName" class="col-sm-2 form-control-label">Name</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="inputName" placeholder="Name">
											</div>
										</div>
										<div class="form-group row">
											<label for="inputExperience" class="col-sm-2 form-control-label">Experience</label>
											<div class="col-sm-10">
												<textarea class="form-control" id="inputExperience" placeholder="Experience"></textarea>
											</div>
										</div>
										<div class="form-group row">
											<label for="inputSkills" class="col-sm-2 form-control-label">Skills</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="inputSkills" placeholder="Skills">
											</div>
										</div>
										<div class="form-group row">
											<div class="offset-sm-2 col-sm-10">
												<div class="checkbox">
													<label>
														<input type="checkbox"> I agree to the <a href="#">terms and conditions</a>
													</label>
												</div>
											</div>
										</div>
										<div class="form-group row">
											<div class="offset-sm-2 col-sm-10">
												<button type="submit" class="btn btn-primary">Submit</button>
											</div>
										</div>
									</form>
								</div>
								<!-- /.tab-pane -->
							</div>
							<!-- /.tab-content -->
						</div>
						<!-- /.nav-tabs-custom -->
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->
			</section>
		</div>
		<!-- Page Content Ends-->
		
		<!-- Back to Top Starts -->
		<a href="javascript:" id="return-to-top"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
		<!-- Back to Top Ends -->
		
		<!-- Footer Section Starts -->
		<footer class="main-footer">
			<div class="pull-right hidden-xs">
			  Version 1.0.0
			</div>
			<p class="mb-0">Copyright © 2019 <a target="_blank" href="http://www.bootstrapmb.com/">Perfectus Inc</a>. All rights
			reserved.</p>
		</footer>
		<!-- Footer Section Ends -->
			
	</div>

	<!-- jQuery CDN - Slim version (=without AJAX) -->
	<script src="../../assets/js/jquery/slim.min.js"></script>
	<!-- Popper.JS -->
	<script src="../../assets/js/jquery/popper.min.js"></script>
	<!-- Bootstrap JS -->
	<script src="../../assets/js/jquery/jquery.min.js"></script>
	<script src="http://cdn.bootstrapmb.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
	<!-- Theme JS -->
	<script src="../../assets/js/nanoscroller/nanoscroller.js"></script>
	<script src="../../assets/js/custom/theme.js"></script>
</body>

</html>
